"use client";
import "dayjs/locale/zh-cn"; //引入中文包，不然日期组件会国际化失败
import React from "react";
import { StyleProvider, createCache, extractStyle } from "@ant-design/cssinjs";
import { useServerInsertedHTML } from "next/navigation";
import type Entity from "@ant-design/cssinjs/es/Cache";
import { createFromIconfontCN } from "@ant-design/icons";
import { ConfigProvider } from "antd";
import zhCN from "antd/locale/zh_CN";
/**用于防止首屏组件样式出现bug */
const StyledComponentsRegistry = ({ children }: { children: React.ReactNode }) => {
  const cache = React.useMemo<Entity>(() => createCache(), [createCache]);
  useServerInsertedHTML(() => <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />);
  return <StyleProvider cache={cache}>{children}</StyleProvider>;
};
export default StyledComponentsRegistry;

/**配置好了的ConfigProvider */
export const AntdConfigProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        components: {
          //不要随便改动全局配置！！
          Message: {
            zIndexPopup: 999999,
          },
          Dropdown: {
            // zIndexPopup: 989, //模型预览组件防遮挡颜色选择器 - 会导致下拉框被其它遮挡，不能用这个
          },
          Carousel: {
            //轮播图配置
            dotHeight: 5,
            dotWidth: 60,
            dotActiveWidth: 120
          },
          ColorPicker: {
            //下面这俩无效，最终是在css文件里设置的
            // zIndexPopupBase: 99999,
            // zIndexBase: 99999,
          },
          // Image: {
          //   //预览部分的层级需要低一点
          //   zIndexPopupBase: 800,
          //   zIndexPopup: 801,
          // },
        },
      }}
    >
      {children}
    </ConfigProvider>
  );
};
